
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        body{margin-top:20px;}
.box{font-size:13px;margin:0 auto; width: 80%;}
.box-head{padding:15px 20px;font-size:14px; text-align: center; font-size:24px; font:bolder;}
.box-body{padding:10px 20px;}
.box-body th{font-weight:normal;vertical-align:top;padding-top:12px;}
.box-body tr:last-child{ text-align: center;}
.box-body input{vertical-align:middle;font-family:Tahoma,simsun;font-size:12px;}
.box-body input[type=text],.box-body input[type=password]{border-color: #bbb;height: 38px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px; width: 350px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}
.box-body input[type=text]:hover, .box-body  input[type=text]:focus, .box-body input[type=password]:hover, .box-body  input[type=password]:focus {border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
.box-body input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
.box-body input:focus::-webkit-input-placeholder,  input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
.box-body input[type=submit]{padding:4px 15px;cursor:pointer; width:120px; height:40px; background: #4393C9; border:1px solid #fff; color: #fff;font:16px bolder;}
.box-body .error{border:1px solid #FF3300; background: #FFF2E5; font-size:10px; height: 30px; line-height: 30px;margin-bottom:10px; padding:0 10px;}
.box-body .success{border:1px solid #01BE00; background: #E6FEE4; font-size:10px; height: 30px; line-height: 30px;margin-bottom:10px; padding:0 10px;}
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box-head">填写注册信息</div>
      <div class="box-body">
        <form>
          <table>
            <tr>
              <th>用户名称：</th>
              <td><input type="text" name="username" placeholder="长度4~12，英文大小写字母"></td>
              <td><div></div></td>
            </tr>
            <tr>
              <th>密　　码：</th>
              <td><input type="password" name="pwd" placeholder="长度6~20，大小写字母、数字或下划线"></td>
              <td><div></div></td>
            </tr>
            <tr>
              <th>确认密码：</th>
              <td><input type="password" name="repwd" placeholder="请再次输入密码进行确认"></td>
              <td><div></div></td>
            </tr>
            <tr>
              <th>手机号码：</th>
              <td><input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号"></td>
              <td><div></div></td>
            </tr>
            <tr>
              <th>电子邮箱：</th>
              <td><input type="text" name="email" placeholder="用户名@域名（域名后缀至少2个字符）"></td>
              <td><div></div></td>
            </tr>
            <tr><td colspan="3"><input type="submit" value="注册"></td></tr>
          </table>
        </form>
      </div>
    </div>
    <script>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length - 1; ++i) {
  inputs[i].onblur = inputBlur;
}
function inputBlur() {
  var name = this.name;          
  var val = this.value;           
  var tips = this.placeholder;    
  var tips_obj = this.parentNode.nextSibling.firstChild; 
  val = val.trim();
  if (!val) {
    error(tips_obj, '输入框不能为空');
    return false;
  }
  var reg_msg = getRegMsg(name, tips);
  if (reg_msg['reg'].test(val)) {
    success(tips_obj, reg_msg['msg']['success']);
  } else {
    error(tips_obj, reg_msg['msg']['error']);
  }
}
function getRegMsg(name, tips) {
  var reg = msg = '';
  switch (name) {
    case 'username':
      reg = /^[a-zA-Z]{4,12}$/;
      msg = {'success': '用户名输入正确', 'error': tips};
      break;
    case 'pwd':
      reg = /^\w{6,20}$/;
      msg = {'success': '密码输入正确', 'error': tips};
      break;
    case 'repwd':
      var con = document.getElementsByTagName('input')[1].value;
      reg = RegExp("^" + con + "$");
      msg = {'success': '两次密码输入正确', 'error': '两次输入的密码不一致'};
      break;
    case 'tel':
      reg = /^1[34578]\d{9}$/;
      msg = {'success': '手机号码输入正确', 'error': tips};
      break;
    case 'email':
      reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
      msg = {'success': '邮箱输入正确', 'error': tips};
      break;
    }
    return {'reg': reg, 'msg': msg};
}
function success(obj, msg) {
  obj.className = 'success';
  obj.innerHTML = msg;
}
function error(obj, msg) {
  obj.className = 'error';
  obj.innerHTML = msg + '，请重新输入';
}
</script>
<p><a href="第九章.html">返回上一级</a></p>
  </body>
</html>